<template>
    <div class="tradingview-technical-analysis-container">
      <div ref="widgetContainer" class="tradingview-widget-container__widget"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch, onMounted } from 'vue'
  
  const props = defineProps({
    symbol: {
      type: String,
      default: 'NASDAQ:AAPL'
    },
    // 间隔
    interval: {
      type: String,
      default: '1m'
    },
    width: {
      type: [String, Number],
      default: "100%"
    },
    height: {
      type: [String, Number],
      default: 500
    },
    colorTheme: {
      type: String,
      default: 'light',
      validator: (value) => ['light', 'dark'].includes(value)
    },
    // 是否透明背景
    isTransparent: {
      type: Boolean,
      default: true
    },
    // 语言
    locale: {
      type: String,
      default: 'zh_TW'
    }
  })
  
  const widgetContainer = ref(null)
  
  const loadWidget = () => {
    if (!widgetContainer.value) return
    
    const script = document.createElement('script')
    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js'
    script.async = true
    script.innerHTML = JSON.stringify({
      interval: props.interval,
      width: props.width,
      height: props.height,
      isTransparent: props.isTransparent,
      symbol: props.symbol,
      showIntervalTabs: true,
      locale: props.locale,
      colorTheme: props.colorTheme
    })
    
    widgetContainer.value.appendChild(script)
  }
  
  const reloadWidget = () => {
    if (widgetContainer.value) {
      widgetContainer.value.innerHTML = ''
      loadWidget()
    }
  }
  
  onMounted(() => {
    loadWidget()
  })
  
  watch(() => props.symbol, reloadWidget)
  // 可以添加其他需要监听的属性
  </script>
  
  <style scoped>
  .tradingview-technical-analysis-container {
    width: 100%;
    height: 100%;
  }
  </style>